<template>
  <div class="tasktab">
    <div class="tablistbox">
      <a
        href="javascript:void(0);"
        :class="index == isactive ? 'active' : ''"
        @click="handelchange(index)"
        :key="index"
        v-for="(item, index) in tablist"
        >{{ item.name }}
      </a>
      <!-- <div class="searchbox">
              <div class="inputborder">
                <input type="text" placeholder="搜索" class="search" style="border-radius:25px">
              </div>
              <i class="el-icon-search icon"></i>
            </div> -->
    </div>
    <first :is="currentView" keep-alive></first>
  </div>
</template>

<script>
import first from './tasktab/first.vue';
import second from './tasktab/second.vue';
import forth from './tasktab/forth.vue';

export default {
  name: 'task-tab',
  data() {
    return {
      isactive: this.$route.params.index ? this.$route.params.index : 0,
      tablist: [
        {name: '我的任务'},
        {name: '新建任务'},
        // {name: '我的日历'},
        {name: '周报'}
      ],
      currentView: this.$route.params.currentView ? this.$route.params.currentView : 'first'
    };
  },
  components: {
    first,
    second,
    forth
  },
  methods: {
    handelchange(index) {
      this.isactive = index;
      if (index === 0) {
        this.currentView = 'first';
      } else if (index === 1) {
        this.currentView = 'second';
      // } else if (index === 2) {
      //   this.currentView = 'third';
      } else {
        this.currentView = 'forth';
      }
    }
  }
};
</script>

<style lang="less" scoped>
.tablistbox {
  width: 98%;
  height: 45px;
  background-color: #fff;
  border-radius: 30px;
  box-shadow: 0px 1px 2px 0px #b9b9b9;
  margin: 10px 20px 15px 20px;
  display: flex;
  align-items: center;
  position: relative;
  a {
    color: #333;
    // width: 180px;
    height: 35px;
    padding: 0 30px;
    margin: 0 100px 0 10px;
    display: inline-block;
    line-height: 35px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s;
    border-radius: 25px;
  }
  a:hover {
    color: #fff;
    background-image: linear-gradient(270deg, #1160cf 0%, #cd06bf 100%);
    box-shadow: 1px 0px 5px #1160cf, -1px 0px 5px #cd06bf;
  }
  .active {
    color: #fff;
    background-image: linear-gradient(270deg, #1160cf 0%, #cd06bf 100%);
    box-shadow: 1px 0px 5px #1160cf, -1px 0px 5px #cd06bf;
  }
}
</style>
